<template>
  <Page name="银行卡">
    <div class="add-card">
      <ul>
        <li>
          <span>姓名</span>
          <input type="text" v-model="formType.user_name" placeholder="请输入银行卡开户姓名" @input="watch">
          <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear" 
              v-if="formType.user_name.length!=0" 
              @click="formType.user_name=''">
        </li>
        <li>
          <span>银行</span>
          <input type="bank_name" v-model="formType.bank_name" placeholder="请输入银行卡所属银行名称" @input="watch">
          <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear" 
              v-if="formType.bank_name.length!=0" 
              @click="formType.bank_name=''">
        </li>
        <li>
          <span>卡号</span>
          <input type="number" v-model="formType.bank_card_no" placeholder="输入对应银行卡号" @input="watch(true)">
          <img src="~/assets/img/ic_login_clear@2x.png" alt="" class="clear" 
              v-if="formType.bank_card_no.length!=0" 
              @click="formType.bank_card_no=''">
        </li>
      </ul>
      <div class="btn">
        <button class="btn btn-block btn-primary" :class="flag" @click="submit">
          添加
        </button>
      </div>
    </div>
  </Page>
</template>

<script>
import Page from '~/components/page';

export default {
  components: {
    Page,

  },
  data() {
    return {
      formType:{
        user_name:"",
        bank_name:"",
        bank_card_no:"",
      },
      flag:'disabled',
    };
  },
  mounted(){
    
  },
  methods: {
    watch(flag){
      if(flag){
        this.formType.bank_card_no = this.formType.bank_card_no.replace(/[^\d]/g,'');
      }
      if(this.formType.user_name!="" && this.formType.bank_name!="" && this.formType.bank_card_no!=""){
        this.flag = "";
      }else{
        this.flag = "disabled";
      }
    },
    async submit(){
        let params = this.formType;
        let { data: rs } = await this.$axios.post('?ct=api&ac=bank',params);
        if(rs.code == 0){
          this.$toast("银行卡添加成功");
          window.history.go(-1);
        }else{
          this.$toast(rs.msg);
        }
    }
  }
}
</script>

<style lang="less" scoped>
  .add-card{
    ul{
      padding-left:30px;
      background: #fff;
      margin-top:30px;
      li{
        line-height: 110px;
        border-bottom:1px solid #ededed;
        font-size:32px;
        color:#292929;
        display: flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        span{
          margin-right:90px;
        }
        input{
          flex: 1;
          font-size:30px;
        }
        &:last-child{
          border-bottom:none;
        }
        .clear{
          width:30px;
          height:30px;
          position: absolute;
          right:30px;
          top:40px;
        }
      }
    }
    div.btn{
      width:688px;
      margin:40px auto;
      display: block;
      .btn{
        border-radius: 8px;
        border:0;
      }
      .btn.disabled{
        opacity: .6;
        cursor: not-allowed;
      }
    }
  }
</style>
